// import
import React, {useState, useEffect, useRef} from 'react';
import CurrencyTips from './CurrencyTips';
import CurrencyModal from './CurrencyModal';


let Demo = () => {
    let [tipsOpen, setTipsOpen] = useState({
        open: false,
        tips: '绑定中...'
    })
    let [confirmModalOperation, setConfirmModalOperation]: any = useState({
      open: false,
      tips: '',
      onClose: null,
      onOk: null
    })
    
    let closeConfirmModalOperation = () => {
        setConfirmModalOperation({
            ...confirmModalOperation,
            open: false
        })
    }
      
    let tipsOpenFunc = (tips: any) => {
        setTipsOpen({
            ...tipsOpen,
            open: true,
            tips: tips
        })
    }
    
    let tipsCloseFunc = () => {
        setTipsOpen({
            ...tipsOpen,
            open: false,
        })
    }
    
    let tipsOpenCloseFunc = (tips: any, closeTime: any) => {
        setTipsOpen({
            ...tipsOpen,
            open: true,
            tips: tips
        })
        setTimeout(() => setTipsOpen({ ...tipsOpen, open: false}), closeTime || '1000')
    }
    
    let tipsDom = (
        <CurrencyTips>
            { tipsOpen.tips }
        </CurrencyTips>
    )

    let confirmModal = (
        <CurrencyModal close={true} operation={confirmModalOperation.operation} viewClass={confirmModalOperation.viewClass}  closeText={confirmModalOperation.closeText} okText={confirmModalOperation.okText} onClose={confirmModalOperation.onClose} onOk={confirmModalOperation.onOk}>
            { confirmModalOperation.title && <div className="currencyModalTitle">{ confirmModalOperation.title }</div> }
            { confirmModalOperation.tips && <div className="currencyModalTips">{ confirmModalOperation.tips }</div> }
        </CurrencyModal>
    )

    return (
        <>
            { confirmModalOperation.open && confirmModal }
            { tipsOpen.open && tipsDom }
        </>
    )
}

export default Demo